<template>
	<view class="uni-body">
		<view class="terminalName">终端名称：{{dailyYwData.terminalName}}</view>
		<view class="flexItem"><view class="textName">水质取样口</view><view class="text">
				{{dailyYwData.samplingPort==1?'入水口':dailyYwData.samplingPort==2?'出水口':''}}</view>
		</view>
		<view class="flexItem" style="display: flex;"><view class="textName">取样照片</view>
			<view v-if="dailyYwData.samplingPic" style="display: flex;flex-wrap: wrap;">
				<image style="width: 150rpx; height: 150rpx;margin-right: 10rpx;"
					v-for="(pic, index) in dailyYwData.samplingPic.split(',')" :src="pic"
					:key="index" mode="aspectFit" @click="clickImg(pic, index)">
				</image>
			</view>
		</view>
		<view class="flexItem">水质指标</view>
		<view class="flexItem"><view class="textName">氨氮</view><view class="text">{{dailyYwData.ammoNo||''}}</view>
		</view>
		<view class="flexItem"><view class="textName">COD</view><view class="text">{{dailyYwData.cod||''}}</view>
		</view>
		<view class="flexItem"><view class="textName">PH</view><view class="text">{{dailyYwData.ph||''}}</view>
		</view>
		<view class="flexItem"><view class="textName">总磷</view><view class="text">{{dailyYwData.totalP||''}}</view>
		</view>
		<view class="flexItem"><view class="textName">总氮</view><view class="text">{{dailyYwData.totalN||''}}</view>
		</view>
		<view class="flexItem"><view class="textName">提交人员</view><view class="text">{{ dailyYwData.samplingBy||'' }}</view>
		</view>
		<view class="flexItem"><view class="textName">运维时间</view><view class="text">{{ dailyYwData.omDate||'' }}</view>
		</view>
		<view class="flexItem" style="border-bottom: 0;padding-bottom: 0"><view class="textName">文件上传</view>
			<view v-if="dailyYwData.file">
				<!-- <view class="" v-for="(i, index) in JSON.parse(dailyYwData.file || '[]')" @click="previewWechat(i.path)">
					{{i.name}}
					</view> -->
					<view class="text" @click="previewWechat(JSON.parse(dailyYwData.file || '{}').path)">
						{{JSON.parse(dailyYwData.file || '{}').name}}
						</view>
				<!-- <image style="width: 150rpx; height: 150rpx"
					v-for="(src, index) in JSON.parse(dailyYwData.samplingPic || '[]')" :src="src.path"
					:key="index" mode="aspectFit" @click="clickImg(src.path, index)">
				</image> -->
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			dailyYwData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {


			};
		},
		created() {

		},
		mounted() {},
		methods: {
			previewWechat(urlPdf) {
				uni.showLoading({
					title: '正在加载中..'
				})
				uni.downloadFile({
					url: urlPdf[0],
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
								uni.hideLoading()
							},
						});
					},
					complete: function(r) {
						uni.hideLoading()
					}
				});
			},
			// 图片预览功能
			clickImg(url, index) {
			  var imageArr = [];
			  imageArr.push(url);
			  //uniapp预览轮播图方法
			  uni.previewImage({
			    current: index, //预览图片的下标
			    urls: imageArr //预览图片的地址，必须要数组形式
			  })
			},
		},
	};
</script>
<style scoped lang="scss">
	.page-view {
		height: 100vh;
		// background: #f8f9fb;
		position: relative;
		overflow: hidden;
	}

	.uni-body {
		margin: 0 32rpx;
		padding: 28rpx;
		background: #FFFFFF;
		font-weight: 800;
		font-size: 28rpx;
		color: #4A4A4A;
		border-radius: 10rpx 10rpx 10rpx 10rpx;

		.flexItem {
			display: flex;
			border-bottom: 1rpx #EBEBEB solid;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			color: #989898;
			padding-left: 20rpx;

			.text {
				color: #4A4A4A;
			}
			.textName{
				width: 30%;
			}
		}

		.margin {
			width: 450rpx;
			height: 150rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 1rpx solid #EFEFEF;
			padding-left: 32rpx;
			padding-top: 8rpx;
			margin-left: 10rpx;
			color: #4A4A4A;
		}

		.terminalName {
			border-bottom: 1rpx #EBEBEB solid;
			margin-bottom: 18rpx;
			padding-bottom: 22rpx;
		}
	}
</style>